<template>
  <div class="page-search-detail">
    <h2>拉丁名：{{detail['属（拉丁名）']}}</h2>
    <h2>中文名：{{detail['属（中文名）']}}</h2>
    <div class="tags">
      <el-tag type="danger">濒危</el-tag>
      <el-tag>国家一级保护动物</el-tag>
      <el-tag>鸟类</el-tag>
    </div>

    <el-tabs v-model="activeTab" class="detail-tabs" @tab-click="onTabClick" type="border-card">
      <el-tab-pane label="物种信息" name="summary">
        <DetailSummary :detail="detail" :invest="invest" />
      </el-tab-pane>
      <el-tab-pane label="物种图片" name="picture" lazy>
        <DetailPicture :detail="detail" />
      </el-tab-pane>
      <el-tab-pane label="物种分类" name="category" lazy>
        <DetailCategory :detail="detail" />
      </el-tab-pane>
      <el-tab-pane label="调查信息" name="survey" lazy>
        <DetailSurvey :detail="detail" :invest="invest" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {getDetail} from '@/api'
import DetailSummary from './summary'
import DetailPicture from './picture'
import DetailCategory from './category'
import DetailSurvey from './survey'

export default {
  name: "SearchDetail",
  components: {
    DetailSummary,
    DetailPicture,
    DetailCategory,
    DetailSurvey,
  },
  props: {
    id: String
  },
  data() {
    return {
      activeTab: "summary",
      detail: {},
      invest: []
    }
  },
  methods: {
    onTabClick(tab) {
      console.log('tab.paneName: >>', tab.paneName)
    },
  },
  created(){
    try {
      getDetail(this.id).then(res => {
      this.detail = res.species
      this.invest = res.invest_data
    })
    } catch (error) {
      console.log('error: >>', error)
    }
  }
};
</script>

<style lang="scss">
.page-search-detail{
  padding: 30px;

  & > h2 {
    margin-bottom: 8px;
  }
  .tags{
    margin: 12px 0;
    .el-tag{
      margin-right: 8px;
    }
  }

  .detail-tabs{

    .el-tabs__content{
      min-height: 400px;
    }
  }
}
</style>